// Mini reset
html {
  font-size: 16px;
}

html,
body,
ul {
  font-family: Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 0;
}

// body too small for entire page
html,
body {
  min-height: 100vh;
}

li {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

// Utility
.hidden {
  display: none !important;
}

.invisible {
  opacity: 0;
  pointer-events: none;
  position: absolute;
}

.loading {
  background: url() center center no-repeat;

  > * {
    opacity: .5;
  }
}

.active {
  background-color: #ffc;
}

// Items
main {
  padding: 20px;

  ul {
    border: 1px solid #efefef;
    border-radius: 5px;
    margin: 0;
    padding: 0 5px;

    li {
      background: none no-repeat left center;
      border-top: 1px solid #eee;
      cursor: pointer;
      display: block;
      overflow: hidden;
      padding: 5px 0 5px 5px;

      &:hover {
        background-color: #fafafa;
      }

      &:first-child {
        border-top: 0;
      }

      &.active {
        color: #000;
      }

      &.loading {
        background-size: contain;

        * {
          pointer-events: none;
        }
      }

      .size {
        color: #aaa;
        display: inline-block;
        margin: 0 10px;
      }

      .copy,
      .move,
      .rename,
      .delete,
      [download] {
        background: none no-repeat center center;
        float: right;
        height: 16px;
        margin: 0 5px;
        overflow: hidden;
        text-indent: 26px;
        white-space: nowrap;
        width: 16px;
      }

      .copy {
        background-image: url();
      }

      .move {
        background-image: url();
      }

      .rename {
        background-image: url();
      }

      .delete {
        background-image: url();
      }

      [download] {
        background-image: url();
      }

      input {
        border: 0;
        padding: 0;
        font-size: 1rem;
      }

      &.directory {
        &::before {
          content: url();
        }

        .size,
        [download] {
          display: none;
        }
      }

      &.file {
        &::before {
          content: url();
        }

        &.image {
          &::before {
            content: url();
          }
        }

        &.py,
        &.css,
        &.js,
        &.xml {
          &::before {
            content: url();
          }
        }

        &.log,
        &.txt,
        &.nfo {
          &::before {
            content: url();
          }
        }

        &.rb {
          &::before {
            content: url();
          }
        }

        &.sql {
          &::before {
            content: url();
          }
        }

        &.html {
          &::before {
            content: url();
          }
        }

        &.php {
          &::before {
            content: url();
          }
        }
      } // main ul li.file

      .progress {
        border: 1px solid #eee;
        display: inline-block;
        float: left;
        height: 7px;
        margin: 2px 0 2px 2px;
        width: 100px;

        .meter {
          background: #0c0;
          display: block;
          height: 7px;
          width: 0;
        }
      }

      .cancel-upload {
        color: #900;
        margin: -1px 0 0 5px;
      }
    } // main ul li
  } // main ul
} // main

.upload {
  border: 1px solid #eee;
  border-radius: 5px;
  color: #999;
  font-size: 1.5em;
  font-weight: bold;
  margin: 0 20px;
  padding: 10px 0;
  text-align: center;
  transition: .5s;

  .create-directory {
    color: #22a;
    font-size: inherit;
    text-decoration: underline;
  }

  .is-touch & .droppable,
  .no-drag-drop & .droppable {
    display: none;
  }

  [type="file"] {
    max-width: 100%;
  }
}

.basicLightbox {
  .basicLightbox__placeholder {
    max-height: 95vh;
    max-width: 95vw;
    overflow: auto;
    padding: 0 1em;
  }

  &.font,
  &.text {
    .basicLightbox__placeholder {
      background: #fff;
    }
  }

  body:not([data-disable-checkerboard]) &.image img {
    pointer-events: all;

    &:hover {
      // copied from https://codepen.io/pascalvgaal/pen/jPXPNP
      background: #eee url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" fill-opacity=".25" ><rect x="200" width="200" height="200" /><rect y="200" width="200" height="200" /></svg>');
      background-size: 30px 30px;
    }
  }
}
